<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/nft.ico" />
    <title>测试CDN模式的文档</title>
    <!-- vue3 -->
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
    <!-- element-plus 的 css -->
    <link href="https://unpkg.com/element-plus@2.0.6/dist/index.css" rel="stylesheet"/>
    <!-- element-plus -->
    <script src="https://unpkg.com/element-plus@2.0.6/dist/index.full.js"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios@0.26.1/dist/axios.min.js"></script>
    <!-- ui-core -->
    <script src="https://unpkg.com/@naturefw/ui-core@0.1.3/dist/nf-ui-core.umd.js"></script>
    <!-- ui-elp -->
    <script src="https://unpkg.com/@naturefw/ui-elp@0.1.5/dist/nf-ui-elp.umd.js"></script>
    <!-- nf-stat -->
    <script src="https://unpkg.com/@naturefw/nf-state@0.2.5/dist/nfState.umd.js"></script>
    <!-- storage -->
    <script src="https://unpkg.com/@naturefw/storage@0.2.4/dist/nf-web-storage.umd.js"></script>
    <!-- axios -->
    <script src="/script/nf-press-edit.umd.js"></script>
  </head>
  <body style="margin: 20px;">
    <div id="app">
      <el-container>
        <el-header>
          <!--导航-->
          <div style="float: left;">
            <!--写网站logo、标题等-->
            <h1> 测试CDN模式的文档 </h1>
          </div>
          <div style="float: right;min-width: 100px;height: 60px;padding-top: 13px;">
            <!--写网站logo、标题等-->
          </div>
          <div style="float: right;min-width: 500px;height: 60px;">22
            <!--网站导航-->
            <doc-navi ></doc-navi>
          </div>
        </el-header>
        <el-container>
          <!--左侧边栏-->
          <el-aside width="330px">
            <!--菜单
            <doc-menu/>
            <doc-menu-edit/>-->
          </el-aside>
          <el-main>
            <!--文档区域
            <component
              :is="docControl[$state.current.isView]"
            />-->
          </el-main>
        </el-container>
      </el-container>
    </div>
    
    <script>
      const { reactive, ref, onMounted } = Vue
      // 设置 indexedDB 数据库，存放文档的各种信息。
      const { setupIndexedDB, setupStore, createRouter } = nfPressEdit
      const { docMenu, docMenuEdit, docNavi } = nfPressEdit // 菜单 导航

      // 初始化 indexedDB 数据库
      setupIndexedDB('')

      const App = {
        components: {
          docMenu, docMenuEdit, docNavi
        },
        setup () {
          const message = '做个目录'
                
          const itemProps = reactive({
            'inline-prompt': true,
            'active-text': '看',
            'inactive-text': '写',
            'active-color': '#378FEB',
            'inactive-color': '#EA9712'
          })
          return {
            itemProps,
            message
          }
        }
      }
      const app = Vue.createApp(App)
      app .use(setupStore) // 状态管理
        .use(createRouter()) // 设置路由
        .use(nfUIElp) // 二次封装的组件
        .use(ElementPlus)
        .mount("#app")
    </script>
  </body>
</html>
